<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Settings - MaoXian</title>
    <link rel="icon" type="image/png" href="../icons/mx-wc-32.png" />
    <link href="_base.css" rel="stylesheet"/>
    <link href="setting.css" rel="stylesheet"/>
  </head>
  <body>

    <div class="main">
      <div class="sidebar">
        <div class="sidebar-folder">&#9776;</div>
        <div class="sidebar-content">
          <a class="menu" href="#setting-general" i18n="title.general"></a>
          <a class="menu" href="#setting-storage" i18n="title.storage"></a>
          <a class="menu" href="#setting-html" i18n="title.html"></a>
          <a class="menu" href="#setting-markdown" i18n="title.markdown"></a>
          <a class="menu" href="#setting-assistant" i18n="title.assistant"></a>
          <a class="menu" href="#setting-user-script" i18n="title.user-script"></a>
          <a class="menu" href="#setting-user-command" i18n="title.user-command"></a>
          <a class="menu" href="#setting-advanced" i18n="title.advanced"></a>
          <hr />
          <a class="menu" href="#setting-offline-page" i18n="title.offline-page"></a>
          <a class="menu" href="#setting-refresh-history" i18n="title.refresh-history"></a>
          <hr />
          <a class="menu" href="#setting-handler-browser" i18n="title.handler-browser"></a>
          <a class="menu" href="#setting-handler-native-app" i18n="title.handler-native-app"></a>
          <a class="menu" href="#setting-handler-wiz-note-plus" i18n="title.handler-wiz-note-plus"></a>
          <hr />
          <a class="menu" href="#setting-reset-and-backup" i18n="title.reset-and-backup"></a>

        </div>
      </div>
      <div class="content">
      </div>
    </div>

    <template id="section-setting-html-tpl">
      <section id="setting-html">
        <h2 class="center" i18n="title.html"></h2>
        <div>
          <h3 i18n="title.clipping-content"></h3>
          <div class="input-group">
            <input type="checkbox" id="html-save-clipping-information" />
            <label for="html-save-clipping-information" i18n="label.clip-information-input"></label>
          </div>

          <div class="input-group">
            <input type="checkbox" id="html-custom-body-bg-css-enabled" />
            <label for="html-custom-body-bg-css-enabled" i18n="label.html-custom-body-bg-css-enabled-input"></label>
            <input type="color" id="html-custom-body-bg-css-value"></input>
          </div>

          <div class="input-group">
            <input type="checkbox" id="html-compress-css" />
            <label for="html-compress-css" i18n="label.html-compress-css-input"></label>
          </div>

          <fieldset class="input-group">
            <legend i18n="capture.target.icon"></legend>
            <p i18n="notice.icon.intro"></p>
            <div id="html-capture-icon">
              <input type="radio" value="saveAll" name="html-capture-icon" id="save-all-icon">
              <label for="save-all-icon" i18n="option.capture.save-all"></label>
              <input type="radio" value="saveFavicon" name="html-capture-icon" id="save-favicon-icon">
              <label for="save-favicon-icon" i18n="option.capture.save-favicon"></label>
              <input type="radio" value="remove" name="html-capture-icon" id="remove-icon">
              <label for="remove-icon" i18n="option.capture.remove"></label>
            </div>
          </fieldset>

          <fieldset class="input-group">
            <legend i18n="capture.target.image"></legend>
            <p i18n="notice.image.intro"></p>
            <div id="html-capture-image">
              <input type="radio" value="saveAll" name="html-capture-image" id="save-all-image">
              <label for="save-all-image" i18n="option.capture.save-all"></label>
              <input type="radio" value="saveCurrent" name="html-capture-image" id="save-current-image">
              <label for="save-current-image" i18n="option.capture.save-current"></label>
            </div>
          </fieldset>

          <fieldset class="input-group">
            <legend i18n="capture.target.css-image"></legend>
            <p i18n="notice.css-image.intro"></p>
            <div id="html-capture-css-image">
              <input type="radio" value="saveAll" name="html-capture-css-image" id="save-all-css-image">
              <label for="save-all-css-image" i18n="option.capture.save-all"></label>
              <input type="radio" value="remove" name="html-capture-css-image" id="remove-css-image">
              <label for="remove-css-image" i18n="option.capture.remove"></label>
            </div>
          </fieldset>

          <fieldset class="input-group">
            <legend i18n="capture.target.web-font"></legend>
            <p i18n="notice.web-font.intro"></p>
            <div id="html-capture-web-font">
              <input type="radio" value="saveAll" name="html-capture-web-font" id="save-all-web-font">
              <label for="save-all-web-font" i18n="option.capture.save-all"></label>

              <input type="radio" value="filterList" name="html-capture-web-font" id="filter-list-web-font">
              <label for="filter-list-web-font" i18n="option.capture.filter-list"></label>
              <input type="radio" value="remove" name="html-capture-web-font" id="remove-web-font">
              <label for="remove-web-font" i18n="option.capture.remove"></label>
            </div>
            <div class="binded" data-bind-radio="html-capture-web-font" data-bind-value="filterList">
              <br />
              <div class="notice-info">
                <p i18n="notice.capture-filter-intro"></p>
                <details>
                  <summary i18n="help.how-to-write-it" i18n-attr="title:help.label"></summary>
                <div class="help-content">
                  <p i18n="notice.capture-filter-format-web-font"></p>
                  <p i18n="notice.capture-filter-list-format"></p>
                  <p i18n="notice.capture-web-font-extra-intro"></p>
                </div>
                </details>
              </div>
              <input id="html-web-font-filter-list" type="text" i18n-attr="placeholder:placeholder.notblank" required>
            </div>
          </fieldset>

          <fieldset class="input-group">
            <legend i18n="capture.target.css-rules"></legend>
            <p i18n="notice.css-rules.intro"></p>
            <div id="html-capture-css-rules">
              <input type="radio" value="saveAll", name="html-capture-css-rules" id="save-all-css-rules">
              <label for="save-all-css-rules" i18n="option.capture.save-all"></label>
              <input type="radio" value="saveUsed" name="html-capture-css-rules" id="save-used-css-rules">
              <label for="save-used-css-rules" i18n="option.capture.save-used"></label>
            </div>
          </fieldset>


          <fieldset class="input-group">
            <legend i18n="capture.target.audio"></legend>
            <p i18n="notice.audio.intro"></p>
            <div id="html-capture-audio">
              <input type="radio" value="saveAll" name="html-capture-audio" id="save-all-audio">
              <label for="save-all-audio" i18n="option.capture.save-all"></label>
              <input type="radio" value="saveCurrent" name="html-capture-audio" id="save-current-audio">
              <label for="save-current-audio" i18n="option.capture.save-current"></label>
              <input type="radio" value="remove" name="html-capture-audio" id="remove-audio">
              <label for="remove-audio" i18n="option.capture.remove"></label>
            </div>
          </fieldset>

          <fieldset class="input-group">
            <legend i18n="capture.target.video"></legend>
            <p i18n="notice.video.intro"></p>
            <div id="html-capture-video">
              <input type="radio" value="saveAll" name="html-capture-video" id="save-all-video">
              <label for="save-all-video" i18n="option.capture.save-all"></label>
              <input type="radio" value="saveCurrent" name="html-capture-video" id="save-current-video">
              <label for="save-current-video" i18n="option.capture.save-current"></label>
              <input type="radio" value="remove" name="html-capture-video" id="remove-video">
              <label for="remove-video" i18n="option.capture.remove"></label>
            </div>
          </fieldset>


          <fieldset class="input-group">
            <legend i18n="capture.target.embed"></legend>
            <p i18n="notice.embed.intro"></p>
            <div id="html-capture-embed">
              <input type="radio" value="saveAll" name="html-capture-embed" id="save-all-embed">
              <label for="save-all-embed" i18n="option.capture.save-all"></label>
              <input type="radio" value="saveImage" name="html-capture-embed" id="save-image-embed">
              <label for="save-image-embed" i18n="option.capture.save-image"></label>

              <input type="radio" value="filter" name="html-capture-embed" id="filter-embed">
              <label for="filter-embed" i18n="option.capture.filter"></label>
              <input type="radio" value="remove" name="html-capture-embed" id="remove-embed">
              <label for="remove-embed" i18n="option.capture.remove"></label>
            </div>

            <div class="binded" data-bind-radio="html-capture-embed" data-bind-value="filter">
              <br />
              <div class="notice-info">
                <p i18n="notice.capture-filter-intro"></p>
                <details>
                  <summary i18n="help.how-to-write-it" i18n-attr="title:help.label"></summary>
                <div class="help-content">
                  <p i18n="notice.capture-filter-format"></p>
                  <p>
                  <span i18n="notice.capture-filter-variable.intro"></span><br /><br />
                    <span i18n="notice.capture-filter-variable.images"></span><br />
                    <span i18n="notice.capture-filter-variable.audios"></span><br />
                    <span i18n="notice.capture-filter-variable.videos"></span><br />
                  </p>
                </div>
                </details>
              </div>
              <input id="html-embed-filter" type="text" i18n-attr="placeholder:placeholder.notblank" required>
            </div>
          </fieldset>



          <fieldset class="input-group">
            <legend i18n="capture.target.object"></legend>
            <p i18n="notice.object.intro"></p>
            <div id="html-capture-object">
              <input type="radio" value="saveAll" name="html-capture-object" id="save-all-object">
              <label for="save-all-object" i18n="option.capture.save-all"></label>
              <input type="radio" value="saveImage" name="html-capture-object" id="save-image-object">
              <label for="save-image-object" i18n="option.capture.save-image"></label>
              <input type="radio" value="filter" name="html-capture-object" id="filter-object">
              <label for="filter-object" i18n="option.capture.filter"></label>
              <input type="radio" value="remove" name="html-capture-object" id="remove-object">
              <label for="remove-object" i18n="option.capture.remove"></label>
            </div>
            <div class="binded" data-bind-radio="html-capture-object" data-bind-value="filter">
              <br />
              <div class="notice-info">
                <p i18n="notice.capture-filter-intro"></p>
                <details>
                  <summary i18n="help.how-to-write-it" i18n-attr="title:help.label"></summary>
                <div class="help-content">
                  <p i18n="notice.capture-filter-format"></p>
                  <p>
                  <span i18n="notice.capture-filter-variable.intro"></span><br /><br />
                    <span i18n="notice.capture-filter-variable.images"></span><br />
                    <span i18n="notice.capture-filter-variable.audios"></span><br />
                    <span i18n="notice.capture-filter-variable.videos"></span><br />
                  </p>
                </div>
                </details>
              </div>
              <input id="html-object-filter" type="text" i18n-attr="placeholder:placeholder.notblank" required>
            </div>
          </fieldset>


          <fieldset class="input-group">
            <legend i18n="capture.target.applet"></legend>
            <p i18n="notice.applet.intro"></p>
            <div id="html-capture-applet">
              <input type="radio" value="saveAll" name="html-capture-applet" id="save-all-applet">
              <label for="save-all-applet" i18n="option.capture.save-all"></label>
              <input type="radio" value="remove" name="html-capture-applet" id="remove-applet">
              <label for="remove-applet" i18n="option.capture.remove"></label>
            </div>
          </fieldset>

        </div>
      </section>
    </template>

    <template id="section-setting-markdown-tpl">
      <section id="setting-markdown">
        <h2 class="center" i18n="title.markdown"></h2>
        <div>
            <h3 i18n="title.markdown-template"></h3>
            <div class="notice-info">
              <p i18n="notice.markdown-template"></p>
              <details>
                <summary i18n="help.avariable-variable" i18n-attr="title:help.label"></summary>
                <div class="help-content">
                  <span i18n="tpl-variable.title"></span>
                  <span i18n="tpl-variable.content"></span>
                  <span i18n="tpl-variable.content-only"></span>
                  <span i18n="tpl-variable.url"></span>
                  <span i18n="tpl-variable.category"></span>
                  <span i18n="tpl-variable.tags"></span>
                  <span i18n="tpl-variable.created-at"></span>
                  <span i18n="tpl-variable.year"></span>
                  <span i18n="tpl-variable.sYear"></span>
                  <span i18n="tpl-variable.month"></span>
                  <span i18n="tpl-variable.day"></span>
                  <span i18n="tpl-variable.hour"></span>
                  <span i18n="tpl-variable.minute"></span>
                  <span i18n="tpl-variable.second"></span>
                  <span i18n="tpl-variable.intSec"></span>
                  <span i18n="tpl-variable.page-metas"></span>
                  <span i18n="tpl-variable.meta-keywords"></span>
                  <span i18n="tpl-variable.tags-and-keywords"></span>
                  <hr />

                  <span i18n="tpl-function.trim-fn"></span>
                </div>
              </details>

              <details>
                <summary i18n="help.examples" i18n-attr="title:help.label"></summary>
                <div class="help-content">
                  <label class="example-label" i18n="help.md-template.example-a"></label><br />
                  <pre class="example-code"><code>
{{content}}

---------------------------------------------------

Original URL : [Access]({{url}})

Created at: {{createdAt}}

Category: {{category}}{{^category}}none{{/category}}

Tags: {{#trimFn}}{{#tags}}`{{.}}`, {{/tags}}{{/trimFn}}{{^tags}}none{{/tags}}
                  </code></pre>

                  <label class="example-label" i18n="help.md-template.example-b"></label><br />
                  <pre class="example-code"><code>---
title: {{title}}{{^title}}Untitled{{/title}}
url: {{url}}
clipped_at: {{createdAt}}
category: {{category}}{{^category}}none{{/category}}
tags: {{#tags}}
 - {{.}}{{/tags}}{{^tags}}
 - none{{/tags}}
---

{{content}}</code></pre>
                </div>
              </details>

            </div>
            <textarea id="markdown-template" i18n-attr="placeholder:placeholder.notblank"></textarea>
        </div>
        <div>
          <h3 i18n="title.markdown-options"></h3>

          <div id="markdown-option-heading-style">
            <h4 i18n="title.markdown-option-heading-style"></h4>
            <input type="radio" value="setext" id="markdown-option-heading-style-a" name="markdown-option-heading-style">
            <label class="label-box" for="markdown-option-heading-style-a"><div><strong class="title">Setext-Style heads</strong><pre><code>A awesome header
----------------</code></pre></div></label>
            <input type="radio" value="atx" id="markdown-option-heading-style-b" name="markdown-option-heading-style">
            <label class="label-box" for="markdown-option-heading-style-b"><div><strong class="title">Atx-Style heads</strong><pre><code># A awesome header</code></pre></div></label>
          </div>

          <div id="markdown-option-hr">
            <h4 i18n="title.markdown-option-hr"></h4>
            <input type="radio" value="* * *" id="markdown-option-hr-a" name="markdown-option-hr">
            <label for="markdown-option-hr-a"><code>* * *</code></label>
            <input type="radio" value="- - -" id="markdown-option-hr-b" name="markdown-option-hr">
            <label for="markdown-option-hr-b"><code>- - -</code></label>
            <input type="radio" value="_ _ _" id="markdown-option-hr-c" name="markdown-option-hr">
            <label for="markdown-option-hr-c"><code>_ _ _</code></label>
          </div>

          <div id="markdown-option-bullet-list-marker">
            <h4 i18n="title.markdown-option-bullet-list-marker"></h4>
            <input type="radio" value="*" id="markdown-option-bullet-list-marker-a" name="markdown-option-bullet-list-marker">
            <label for="markdown-option-bullet-list-marker-a"><code>* list item</code></label>
            <input type="radio" value="-" id="markdown-option-bullet-list-marker-b" name="markdown-option-bullet-list-marker">
            <label for="markdown-option-bullet-list-marker-b"><code>- list item</code></label>
            <input type="radio" value="+" id="markdown-option-bullet-list-marker-c" name="markdown-option-bullet-list-marker">
            <label for="markdown-option-bullet-list-marker-c"><code>+ list item</code></label>
          </div>

          <div id="markdown-option-code-block-style">
            <h4 i18n="title.markdown-option-code-block-style"></h4>
            <input type="radio" value="fenced" id="markdown-option-code-block-style-a" name="markdown-option-code-block-style">
            <label class="label-box" for="markdown-option-code-block-style-a"><div><strong class="title">Fenced</strong><pre><code>```
const hello = () =&gt; {
    console.log("hello world");
}
```</code></pre></div></label>
            <input type="radio" value="indented" id="markdown-option-code-block-style-b" name="markdown-option-code-block-style">
            <label class="label-box" for="markdown-option-code-block-style-b"><div><strong class="title">Indented</strong><pre><code>    const hello = () =&gt; {
        console.log("hello world");
    }
</code></pre></div></label>
          </div>

          <div id="markdown-option-fence">
            <h4 i18n="title.markdown-option-fence"></h4>
            <input type="radio" value="```" id="markdown-option-fence-a" name="markdown-option-fence">
            <label for="markdown-option-fence-a"><code>```</code></label>
            <input type="radio" value="~~~" id="markdown-option-fence-b" name="markdown-option-fence">
            <label for="markdown-option-fence-b"><code>~~~</code></label>
          </div>

          <div id="markdown-option-em-delimiter">
            <h4 i18n="title.markdown-option-em-delimiter"></h4>
            <input type="radio" value="_" id="markdown-option-em-delimiter-a" name="markdown-option-em-delimiter">
            <label for="markdown-option-em-delimiter-a"><code>_italics_</code></label>
            <input type="radio" value="*" id="markdown-option-em-delimiter-b" name="markdown-option-em-delimiter">
            <label for="markdown-option-em-delimiter-b"><code>*italics*</code></label>
          </div>

          <div id="markdown-option-strong-delimiter">
            <h4 i18n="title.markdown-option-strong-delimiter"></h4>
            <input type="radio" value="__" id="markdown-option-strong-delimiter-a" name="markdown-option-strong-delimiter">
            <label for="markdown-option-strong-delimiter-a"><code>__bold__</code></label>
            <input type="radio" value="**" id="markdown-option-strong-delimiter-b" name="markdown-option-strong-delimiter">
            <label for="markdown-option-strong-delimiter-b"><code>**bold**</code></label>
          </div>

          <div id="markdown-option-link-style">
            <h4 i18n="title.markdown-option-link-style"></h4>
            <input type="radio" value="inlined" id="markdown-option-link-style-a" name="markdown-option-link-style">
            <label class="label-box" for="markdown-option-link-style-a"><div><strong class="title">Inlined</strong><pre><code>[example](https://example.org)</code></pre></div></label>
            <input type="radio" value="referenced" id="markdown-option-link-style-b" name="markdown-option-link-style">
            <label class="label-box" for="markdown-option-link-style-b"><div><strong class="title">referenced</strong><pre><code>[example][1]
[1]: https://example.org</code></pre></div></label>
          </div>

          <div id="markdown-option-formula-block-wrapper">
            <h4 i18n="title.markdown-option-formula-block-wrapper"></h4>
            <input type="radio" value="sameLine" id="markdown-option-formula-block-wrapper-a" name="markdown-option-formula-block-wrapper">
            <label class="label-box" for="markdown-option-formula-block-wrapper-a"><div><strong class="title">Same Line</strong><pre><code>$$x + y = z$$</code></pre></div></label>

            <input type="radio" value="padSameLine" id="markdown-option-formula-block-wrapper-b" name="markdown-option-formula-block-wrapper">
            <label class="label-box" for="markdown-option-formula-block-wrapper-b"><div><strong class="title">Pad Same Line</strong><pre><code>$$ x + y = z $$</code></pre></div></label>

            <input type="radio" value="multipleLine" id="markdown-option-formula-block-wrapper-c" name="markdown-option-formula-block-wrapper">
            <label class="label-box" for="markdown-option-formula-block-wrapper-c"><div><strong class="title">Multiple Line</strong><pre><code>$$<br>x + y = z<br>$$</code></pre></div></label>

            <input type="radio" value="mathCodeBlock" id="markdown-option-formula-block-wrapper-d" name="markdown-option-formula-block-wrapper">
            <label class="label-box" for="markdown-option-formula-block-wrapper-d"><div><strong class="title">Math Code Block</strong><pre><code>```math<br>x + y = z<br>```</code></pre></div></label>
          </div>

        </div>
      </section>
    </template>

    <template id="section-setting-reset-and-backup-tpl">
      <section id="setting-reset-and-backup">
        <h2 class="center" i18n="title.reset-and-backup"></h2>
        <div>
          <h3 i18n="title.reset"></h3>
          <span i18n="label.reset-to-default-intro"></span>
          <ul>
            <li i18n="label.backup-setting-page-config-input"></li>
            <li i18n="label.backup-assistant-data-input"></li>
            <li i18n="label.backup-selection-data-input"></li>
          </ul>

          <button id="reset-to-default" i18n="button.reset-to-default"></button>
        </div>
        <div>
          <h3 i18n="title.backup"></h3>
          <input type="checkbox" id="backup-setting-page-config" />
          <label for="backup-setting-page-config" i18n="label.backup-setting-page-config-input"></label>
          <br />
          <input type="checkbox" id="backup-history-page-config" />
          <label for="backup-history-page-config" i18n="label.backup-history-page-config-input"></label>
          <br />
          <input type="checkbox" id="backup-assistant-data" />
          <label for="backup-assistant-data" i18n="label.backup-assistant-data-input"></label>
          <br />
          <input type="checkbox" id="backup-selection-data" />
          <label for="backup-selection-data" i18n="label.backup-selection-data-input"></label>
          <br /><br />
          <button id="backup-to-file" i18n="button.backup-to-file"></button>
        </div>
        <h3 i18n="title.restore"></h3>
        <button id="restore-from-file" i18n="button.restore-from-file"></button>
        <div class="hidden">
          <input id="restore-file-picker" type="file" accept="application/json" />
        </div>
        <div>
      </section>
    </template>

    <template id="section-setting-advanced-tpl">
      <section id="setting-advanced">
        <h2 class="center" i18n="title.advanced"></h2>
        <div>
          <h3 i18n="title.request"></h3>

          <h4 i18n="title.request-timeout"></h4>
          <input type="number" id="request-timeout" min="5" max="86400" value="20" required/>
          <label for="request-timeout" i18n="label.request-timeout-input"></label>

          <h4 i18n="title.request-max-tries"></h4>
          <input type="number" id="request-max-tries" min="1" max="99" value="3" required/>
          <label for="request-max-tries" i18n="label.request-max-tries-input"></label>

          <h4 i18n="title.request-cache"></h4>
          <div class="notice-info" i18n="notice.request-cache"></div>
          <div class="notice-warning" i18n="notice.request-cache-applying"></div>
          <div>
            <input type="number" id="request-cache-size" min="0" max="500" value="80" required/>
            <label for="request-cache-size" i18n="label.request-cache-size-input"></label>
          </div>
          <br />
          <div id="cache-switchers">
            <input type="checkbox" id="request-cache-css" />
            <label for="request-cache-css" i18n="label.request-cache-css-input"></label>
            <br />
            <input type="checkbox" id="request-cache-image" />
            <label for="request-cache-image" i18n="label.request-cache-image-input"></label>
            <br />
            <input type="checkbox" id="request-cache-web-font" />
            <label for="request-cache-web-font" i18n="label.request-cache-web-font-input"></label>
          </div>

          <h4 i18n="title.request-referrer-policy"></h4>
          <div id="request-referrer-policy">
            <div>
              <input type="radio" value="originWhenCrossOrigin" id="request-referrer-policy-a" name="request-referrer-policy" />
              <label for="request-referrer-policy-a" i18n="option.request-referrer-policy.origin-when-cross-origin"></label>
            </div>
            <div>
              <input type="radio" value="origin" id="request-referrer-policy-b" name="request-referrer-policy" />
              <label for="request-referrer-policy-b" i18n="option.request-referrer-policy.origin"></label>
            </div>
            <div>
              <input type="radio" value="noReferrer" id="request-referrer-policy-c" name="request-referrer-policy" />
              <label for="request-referrer-policy-c" i18n="option.request-referrer-policy.no-referrer"></label>
            </div>
            <div>
              <input type="radio" value="unsafeUrl" id="request-referrer-policy-d" name="request-referrer-policy" />
              <label for="request-referrer-policy-d" i18n="option.request-referrer-policy.unsafe-url"></label>
            </div>
          </div>

        </div>
        <div>
          <h3 i18n="title.misc"></h3>
          <input type="checkbox" id="communicate-with-third-party" />
          <label for="communicate-with-third-party" i18n="label.communicate-with-third-party-input"></label>
          <br />
          <input type="checkbox" id="auto-run-content-scripts" />
          <label for="auto-run-content-scripts" i18n="label.auto-run-content-scripts-input"></label>
        </div>
      </section>
    </template>

    <template id="section-setting-general-tpl">
      <section id="setting-general">
        <h2 class="center" i18n="title.general"></h2>
        <div>
          <h3 i18n="title.control"></h3>
          <input type="checkbox" id="mouse-mode-enabled" />
          <label for="mouse-mode-enabled" i18n="label.mouse-mode-enabled-input"></label>
          <br />
          <input type="checkbox" id="select-save-format-on-menus" />
          <label for="select-save-format-on-menus" i18n="label.select-save-format-on-menus"></label>
          <br />
          <input type="checkbox" id="auto-input-last-category" />
          <label for="auto-input-last-category" i18n="label.auto-input-last-category"></label>
          <br />
          <input type="checkbox" id="auto-input-last-tags" />
          <label for="auto-input-last-tags" i18n="label.auto-input-last-tags"></label>
          <br />
          <input type="checkbox" id="remember-selection" />
          <label for="remember-selection" i18n="label.remember-selection-input"></label>
        </div>
        <div>
          <h3 i18n="title.file-url"></h3>
          <div class="notice-info">
            <label i18n="notice.file-url.intro"></label>
            <br />
            <a href="go.page:faq-allow-access-file-urls" i18n="notice.file-url.link-label" target="_blank"></a>
            <br />
            <label i18n="notice.file-url.help-msg"></label>
            <br />
            <label i18n="notice.file-url.ext-id"></label>
            <label>=&gt; ${host}</label>
          </div>
          <div class="notice-warning">
            <strong i18n="g.label.warning"></strong>:<br />
            <label i18n="notice.file-url-warning"></label>
          </div>
          <input type="checkbox" id="file-scheme-access-input"/>
          <label for="file-scheme-access-input" i18n="label.file-url-input"></label>
        </div>
        <div>
          <h3 i18n="title.clipping-content"></h3>

          <input type="checkbox" id="save-domain-as-tag" />
          <label for="save-domain-as-tag" i18n="label.save-domain-tag-input"></label>

          <div>
          </div>
        </div>
      </section>
    </template>

    <template id="section-setting-assistant-tpl">
      <section id="setting-assistant">
        <h2 class="center" i18n="title.assistant"></h2>

        <div class="intro">
          <h3 i18n="title.intro"></h3>
          <div class="notice-info" i18n="notice.assistant-intro"></div>
          <input type="checkbox" id="assistant-enabled"/>
          <label for="assistant-enabled" i18n="label.assistant-enabled-input"></label>
        </div>

        <div class="custom-plan">
          <h3 i18n="title.custom-plan"></h3>
          <div class="notice-info" i18n="notice.custom-plan-intro"></div>
          <textarea id="custom-plans"></textarea>
          <br />
          <button id="save-custom-plan" i18n="button.save"></button>
        </div>

        <div class="public-plan">
          <h3 i18n="title.public-plan"></h3>
          <div class="notice-info" i18n="notice.public-plan-intro"></div>
          <div class="subscriptions">
            <h4 i18n="title.subscriptions"></h4>
            <table>
              <thead>
                <tr>
                  <th i18n="title.subscription.name"></th>
                  <th i18n="title.subscription.version"></th>
                  <th i18n="title.subscription.size"></th>
                  <th i18n="title.subscription.detail"></th>
                </tr>
              </thead>
              <tbody class="subscription-list"></tbody>
            </table>
          </div>
          <br /><br />
          <div class="edit-subscription">
            <div class="notice-info" i18n="notice.edit-subscription"></div>
            <textarea id="plan-subscription"></textarea>
            <div class="logs" id="update-public-plan-log"></div>
            <br>
            <button id="save-plan-subscription" i18n="button.save"></button>
            <button id="update-public-plan-now" i18n="button.update-now"></button>
          </div>
          <div class="switches">
            <br />
            <input type="checkbox" id="auto-update-public-plan"/>
            <label for="auto-update-public-plan" i18n="label.auto-update-public-plan-input"></label>
          </div>
        </div>

        <div class="global-plan">
          <h3 i18n="title.global-plan"></h3>
          <div class="notice-info" i18n="notice.global-plan-intro"></div>
          <textarea id="global-plan"></textarea>
          <br />
          <button id="save-global-plan" i18n="button.save"></button>
        </div>

        <div class="tag-status">
          <h3 i18n="title.default-tag-status"></h3>
          <div class="notice-info" i18n="notice.default-tag-status"></div>
          <input type="text", id="default-tag-status" />
          <br>
          <button id="save-default-tag-status" i18n="button.save"></button>
        </div>

      </section>
    </template>
    <template id="subscription-tpl">
      <tr>
        <td>${name}</td>
        <td>${version}</td>
        <td>${size}</td>
        <td><a href="go.page:extPage.plan-subscription?t=${t}" target="_blank" i18n="title.subscription.detail"></a></td>
      </tr>
    </template>


    <template id="section-setting-user-script-tpl">
      <section id="setting-user-script">
        <h2 class="center" i18n="title.user-script"></h2>
        <h3 i18n="title.user-scripts"></h3>
        <div class="notice-info" i18n="notice.user-script"></div>
        <div class="user-script">
          <table>
            <thead>
              <tr>
                <th i18n="title.user-script.name"></th>
                <th i18n="title.user-script.version"></th>
                <th i18n="title.user-script.author"></th>
                <th i18n="title.user-script.description"></th>
                <th> - </th>
              </tr>
            </thead>
            <tbody class="user-script-list"></tbody>
          </table>
        </div>
        <div class="user-script-actions">
          <button id="refresh-user-scripts" i18n="button.refresh"></button>
          &nbsp;
          <a href="go.page:extPage.sync-user-scripts" target="_blank" i18n="title.user-script.sync-user-scripts"></a>
        </div>
      </section>
    </template>

    <template id="user-script-tpl">
      <tr>
        <td>${name}</td>
        <td>${version}</td>
        <td>${author}</td>
        <td>${description}</td>
        <td><a href="go.page:extPage.user-script?name=${name}" target="_blank" i18n="title.user-script.details"></a></td>
      </tr>
    </template>

    <template id="section-setting-user-command-tpl">
      <section id="setting-user-command">
        <h2 class="center" i18n="title.user-command"></h2>
        <h3 i18n="title.user-commands"></h3>
        <div class="input-group">
          <div class="notice-info" i18n="notice.user-commands"></div>
          <textarea id="user-commands-text" i18n-attr="placeholder:placeholder.notblank"></textarea>
        </div>

        <h3 i18n="title.builtin-commands"></h3>
        <table>
          <thead>
            <tr>
              <th i18n="title.command.name"></th>
              <th i18n="title.command.description"></th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>_doNothing</td>
              <td><label i18n="label.builtin-command.do-nothing"></label></td>
            </tr>
            <tr>
              <td>_openLastClipping</td>
              <td><label i18n="label.builtin-command.open-last-clipping"></label></td>
            </tr>
            <tr>
              <td>_clipAsDefault</td>
              <td><label i18n="label.builtin-command.clip-as-default"></label></td>
            </tr>
            <tr>
              <td>_clipAsHTML</td>
              <td><label i18n="label.builtin-command.clip-as-html"></label></td>
            </tr>
            <tr>
              <td>_clipAsMarkdown</td>
              <td><label i18n="label.builtin-command.clip-as-markdown"></label></td>
            </tr>
          </tbody>
        </table>

        <h3 i18n="title.shortcuts"></h3>
        <div class="notice-info" i18n="notice.shortcuts"></div>
        <fieldset class="input-group">
          <legend i18n="title.shortcut-slot0"></legend>
          <label id="shortcut-slot0-key" i18n="title.shortcut.none"></label>
          <br><label i18n="title.shortcut.command"></label>:
          <input type="text" id="shortcut-slot0" i18n-attr="placeholder:placeholder.notblank"/>
        </fieldset>
        <fieldset class="input-group">
          <legend i18n="title.shortcut-slot1"></legend>
          <label id="shortcut-slot1-key" i18n="title.shortcut.none"></label>
          <br><label i18n="title.shortcut.command"></label>:
          <input type="text" id="shortcut-slot1" i18n-attr="placeholder:placeholder.notblank"/>
        </fieldset>
        <fieldset class="input-group">
          <legend i18n="title.shortcut-slot2"></legend>
          <label id="shortcut-slot2-key" i18n="title.shortcut.none"></label>
          <br><label i18n="title.shortcut.command"></label>:
          <input type="text" id="shortcut-slot2" i18n-attr="placeholder:placeholder.notblank"/>
        </fieldset>
        <fieldset class="input-group">
          <legend i18n="title.shortcut-slot3"></legend>
          <label id="shortcut-slot3-key" i18n="title.shortcut.none"></label>
          <br><label i18n="title.shortcut.command"></label>:
          <input type="text" id="shortcut-slot3" i18n-attr="placeholder:placeholder.notblank"/>
        </fieldset>
        <fieldset class="input-group">
          <legend i18n="title.shortcut-slot4"></legend>
          <label id="shortcut-slot4-key" i18n="title.shortcut.none"></label>
          <br><label i18n="title.shortcut.command"></label>:
          <input type="text" id="shortcut-slot4" i18n-attr="placeholder:placeholder.notblank"/>
        </fieldset>
        <fieldset class="input-group">
          <legend i18n="title.shortcut-slot5"></legend>
          <label id="shortcut-slot5-key" i18n="title.shortcut.none"></label>
          <br><label i18n="title.shortcut.command"></label>:
          <input type="text" id="shortcut-slot5" i18n-attr="placeholder:placeholder.notblank"/>
        </fieldset>
        <fieldset class="input-group">
          <legend i18n="title.shortcut-slot6"></legend>
          <label id="shortcut-slot6-key" i18n="title.shortcut.none"></label>
          <br><label i18n="title.shortcut.command"></label>:
          <input type="text" id="shortcut-slot6" i18n-attr="placeholder:placeholder.notblank"/>
        </fieldset>
        <fieldset class="input-group">
          <legend i18n="title.shortcut-slot7"></legend>
          <label id="shortcut-slot7-key" i18n="title.shortcut.none"></label>
          <br><label i18n="title.shortcut.command"></label>:
          <input type="text" id="shortcut-slot7" i18n-attr="placeholder:placeholder.notblank"/>
        </fieldset>
        <fieldset class="input-group">
          <legend i18n="title.shortcut-slot8"></legend>
          <label id="shortcut-slot8-key" i18n="title.shortcut.none"></label>
          <br><label i18n="title.shortcut.command"></label>:
          <input type="text" id="shortcut-slot8" i18n-attr="placeholder:placeholder.notblank"/>
        </fieldset>
        <fieldset class="input-group">
          <legend i18n="title.shortcut-slot9"></legend>
          <label id="shortcut-slot9-key" i18n="title.shortcut.none"></label>
          <br><label i18n="title.shortcut.command"></label>:
          <input type="text" id="shortcut-slot9" i18n-attr="placeholder:placeholder.notblank"/>
        </fieldset>
      </section>
    </template>


    <template id="section-setting-storage-tpl">
      <section id="setting-storage">
        <h2 class="center" i18n="title.storage"></h2>
        <div class="control">
          <h3 i18n="title.handler"></h3>
          <div class="options" id="storage-handler">
            <a data-value="Browser" i18n="handler.browser.name"></a>
            <a data-value="NativeApp" i18n="handler.native-app.name"></a>
            <a data-value="WizNotePlus" i18n="handler.wiz-note-plus.name"></a>
          </div>
          <div class="danger-box"></div>
          <div class="info-box"></div>
          <div class="warning-box"></div>
        </div>
        <div class="save-format">
          <h3 i18n="title.save-format"></h3>
          <div class="options" id="save-format"></div>
        </div>
        <div class="local-path">
          <h3 i18n="title.path"></h3>
          <div class="notice-light">
            <span i18n="path-intro.format"></span>
            <code i18n="path.download"></code> /
            <code i18n="folder.root"></code> /
            <code i18n="folder.category"></code> /
            <code i18n="folder.clipping"></code> /
            <code i18n="path.filename"></code>
            <br />
            <ul>
              <li i18n="path.download.intro"></li>
              <li i18n="folder.root.intro"></li>
              <li i18n="folder.category.intro"></li>
              <li i18n="folder.clipping.intro"></li>
              <li i18n="path.filename.intro"></li>
            </ul>
          </div>
          <div>

            <fieldset class="input-group">
              <legend i18n="title.root-folder"></legend>
              <div class="notice-warning" i18n="notice.root-folder"></div>
              <input type="text" id="root-folder" i18n-attr="placeholder:placeholder.notblank"/>
            </fieldset>

            <fieldset class="input-group">
              <legend i18n="title.default-category"></legend>
              <div class="notice-info">
                <p i18n="notice.default-category"></p>
                <details>
                  <summary i18n="help.avariable-variable" i18n-attr="title:help.label"></summary>
                  <div class="help-content">
                    <span i18n="variable.none"></span>
                    <span i18n="variable.domain"></span>
                    <span i18n="variable.year"></span>
                    <span i18n="variable.short-year"></span>
                    <span i18n="variable.month"></span>
                    <span i18n="variable.day"></span>
                    <span i18n="variable.hour"></span>
                    <span i18n="variable.minute"></span>
                    <span i18n="variable.second"></span>
                    <span i18n="variable.time-integer-second"></span>
                  </div>
                </details>
              </div>
              <input type="text" id="default-category" i18n-attr="placeholder:placeholder.notblank"/>
            </fieldset>

            <fieldset class="input-group">
              <legend i18n="title.clipping-folder-name"></legend>
              <div class="notice-info">
                <p i18n="notice.clipping-folder-name"></p>
                <details>
                  <summary i18n="help.avariable-variable" i18n-attr="title:help.label"></summary>
                  <div class="help-content">
                    <span i18n="variable.domain"></span>
                    <span i18n="variable.title"></span>
                    <span i18n="variable.format"></span>
                    <span i18n="variable.year"></span>
                    <span i18n="variable.short-year"></span>
                    <span i18n="variable.month"></span>
                    <span i18n="variable.day"></span>
                    <span i18n="variable.hour"></span>
                    <span i18n="variable.minute"></span>
                    <span i18n="variable.second"></span>
                    <span i18n="variable.time-integer-second"></span>
                  </div>
                </details>
              </div>
              <input type="text" id="clipping-folder-name" i18n-attr="placeholder:placeholder.notblank"/>
            </fieldset>

            <fieldset class="input-group">
              <legend i18n="title.main-file"></legend>
              <div class="notice-info">
                <p i18n="notice.main-file-intro"></p>
                <details>
                  <summary i18n="help.avariable-variable" i18n-attr="title:help.label"></summary><br />
                  <div>
                    <strong i18n="variable-in-folder-and-filename"></strong>
                    <div class="help-content">
                      <span i18n="variable.domain"></span>
                      <span i18n="variable.title"></span>
                      <span i18n="variable.format"></span>
                      <span i18n="variable.year"></span>
                      <span i18n="variable.short-year"></span>
                      <span i18n="variable.month"></span>
                      <span i18n="variable.day"></span>
                      <span i18n="variable.hour"></span>
                      <span i18n="variable.minute"></span>
                      <span i18n="variable.second"></span>
                      <span i18n="variable.time-integer-second"></span>
                    </div>
                    <strong i18n="variable-in-folder"></strong>
                    <div class="help-content">
                      <span i18n="variable.root-folder"></span>
                      <span i18n="variable.category-folder"></span>
                      <span i18n="variable.clipping-folder"></span>
                      <span i18n="variable.clipping-path"></span>
                      <span i18n="variable.category-path"></span>
                      <span i18n="variable.storage-path"></span>
                    </div>
                  </div>
                </details>
              </div>
              <div class="input-group">
                <label i18n="label.storage-folder"></label>
                <div class="input-error main-file-folder"><div class="notice-danger"></div></div>
                <input type="text" id="main-file-folder" i18n-attr="placeholder:placeholder.notblank"/>
              </div>
              <div class="input-group">
                <label i18n="label.storage-filename"></label>
                <input type="text" id="main-file-name" i18n-attr="placeholder:placeholder.notblank"/>
              </div>
            </fieldset>

            <fieldset class="input-group">
              <legend i18n="title.asset-file"></legend>
              <div class="notice-info">
                <p i18n="notice.asset-file-intro"></p>
                <details>
                  <summary i18n="help.avariable-variable" i18n-attr="title:help.label"></summary><br />
                  <div>
                    <strong i18n="variable-in-folder-and-filename"></strong>
                    <div class="help-content">
                      <span i18n="variable.domain"></span>
                      <span i18n="variable.title"></span>
                      <span i18n="variable.format"></span>
                      <span i18n="variable.year"></span>
                      <span i18n="variable.short-year"></span>
                      <span i18n="variable.month"></span>
                      <span i18n="variable.day"></span>
                      <span i18n="variable.hour"></span>
                      <span i18n="variable.minute"></span>
                      <span i18n="variable.second"></span>
                      <span i18n="variable.time-integer-second"></span>
                    </div>
                    <strong i18n="variable-in-folder"></strong>
                    <div class="help-content">
                      <span i18n="variable.root-folder"></span>
                      <span i18n="variable.category-folder"></span>
                      <span i18n="variable.clipping-folder"></span>
                      <span i18n="variable.clipping-path"></span>
                      <span i18n="variable.category-path"></span>
                      <span i18n="variable.storage-path"></span>
                    </div>
                    <strong i18n="variable-in-filename"></strong>
                    <div class="help-content">
                      <span i18n="variable.md5-of-url"></span>
                      <span i18n="variable.filename"></span>
                      <span i18n="variable.file-extension"></span>
                    </div>
                  </div>
                </details>
              </div>
              <div class="input-group">
                <label i18n="label.storage-folder"></label>
                <div class="input-error asset-folder"><div class="notice-danger"></div></div>
                <input type="text" id="asset-folder" i18n-attr="placeholder:placeholder.notblank"/>
              </div>
              <div class="input-group">
                <label i18n="label.storage-filename"></label>
                <input type="text" id="asset-file-name" i18n-attr="placeholder:placeholder.notblank"/>
              </div>
            </fieldset>

            <fieldset class="input-group">
              <legend i18n="title.frame-file"></legend>
              <div class="notice-info">
                <p i18n="notice.frame-file-intro"></p>


                <details>
                  <summary i18n="help.avariable-variable" i18n-attr="title:help.label"></summary><br />
                  <div>
                    <strong i18n="variable-in-folder-and-filename"></strong>
                    <div class="help-content">
                      <span i18n="variable.domain"></span>
                      <span i18n="variable.title"></span>
                      <span i18n="variable.format"></span>
                      <span i18n="variable.year"></span>
                      <span i18n="variable.short-year"></span>
                      <span i18n="variable.month"></span>
                      <span i18n="variable.day"></span>
                      <span i18n="variable.hour"></span>
                      <span i18n="variable.minute"></span>
                      <span i18n="variable.second"></span>
                      <span i18n="variable.time-integer-second"></span>
                    </div>
                    <strong i18n="variable-in-folder"></strong>
                    <div class="help-content">
                      <span i18n="variable.root-folder"></span>
                      <span i18n="variable.category-folder"></span>
                      <span i18n="variable.clipping-folder"></span>
                      <span i18n="variable.clipping-path"></span>
                      <span i18n="variable.category-path"></span>
                      <span i18n="variable.storage-path"></span>
                    </div>
                    <strong i18n="variable-in-filename"></strong>
                    <div class="help-content">
                      <span i18n="variable.md5-of-url"></span>
                      <span i18n="variable.filename"></span>
                    </div>
                  </div>
                </details>
              </div>
              <div class="input-group">
                <label i18n="label.storage-folder"></label>
                <div class="input-error frame-file-folder"><div class="notice-danger"></div></div>
                <input type="text" id="frame-file-folder" i18n-attr="placeholder:placeholder.notblank"/>
              </div>
              <div class="input-group">
                <label i18n="label.storage-filename"></label>
                <input type="text" id="frame-file-name" i18n-attr="placeholder:placeholder.notblank"/>
              </div>
            </fieldset>

            <fieldset class="input-group">
              <legend i18n="title.info-file"></legend>
              <input type="checkbox" id="save-info-file" disabled/>
              <label for="save-info-file" i18n="label.save-info-file-input"></label>
              <label>&nbsp;<a href="go.page:faq-dont-save-index-file" target="_blank" i18n="label.save-info-file-link"></a></label>
              <div class="notice-info">
                <p i18n="notice.info-file-intro"></p>
                <details>
                  <summary i18n="help.avariable-variable" i18n-attr="title:help.label"></summary><br />
                  <div>
                    <strong i18n="variable-in-folder-and-filename"></strong>
                    <div class="help-content">
                      <span i18n="variable.domain"></span>
                      <span i18n="variable.title"></span>
                      <span i18n="variable.format"></span>
                      <span i18n="variable.year"></span>
                      <span i18n="variable.short-year"></span>
                      <span i18n="variable.month"></span>
                      <span i18n="variable.day"></span>
                      <span i18n="variable.hour"></span>
                      <span i18n="variable.minute"></span>
                      <span i18n="variable.second"></span>
                      <span i18n="variable.time-integer-second"></span>
                    </div>
                    <strong i18n="variable-in-folder"></strong>
                    <div class="help-content">
                      <span i18n="variable.root-folder"></span>
                      <span i18n="variable.category-folder"></span>
                      <span i18n="variable.clipping-folder"></span>
                      <span i18n="variable.clipping-path"></span>
                      <span i18n="variable.category-path"></span>
                      <span i18n="variable.storage-path"></span>
                    </div>
                  </div>
                </details>
              </div>
              <div class="input-group">
                <label i18n="label.storage-folder"></label>
                <div class="input-error info-file-folder"><div class="notice-danger"></div></div>
                <input type="text" id="info-file-folder" i18n-attr="placeholder:placeholder.notblank"/>
              </div>
              <div class="input-group">
                <label i18n="label.storage-filename"></label>
                <input type="text" id="info-file-name" i18n-attr="placeholder:placeholder.notblank"/>
              </div>
            </fieldset>

            <fieldset class="input-group">
              <legend i18n="title.title-file"></legend>
              <input type="checkbox" id="save-title-file" />
              <label for="save-title-file" i18n="label.save-title-file-input"></label>
              <div class="notice-info">
                <p i18n="notice.title-file-intro"></p>
                <details>
                  <summary i18n="help.avariable-variable" i18n-attr="title:help.label"></summary><br />
                  <div>
                    <strong i18n="variable-in-folder-and-filename"></strong>
                    <div class="help-content">
                      <span i18n="variable.domain"></span>
                      <span i18n="variable.title"></span>
                      <span i18n="variable.format"></span>
                      <span i18n="variable.year"></span>
                      <span i18n="variable.short-year"></span>
                      <span i18n="variable.month"></span>
                      <span i18n="variable.day"></span>
                      <span i18n="variable.hour"></span>
                      <span i18n="variable.minute"></span>
                      <span i18n="variable.second"></span>
                      <span i18n="variable.time-integer-second"></span>
                    </div>
                    <strong i18n="variable-in-folder"></strong>
                    <div class="help-content">
                      <span i18n="variable.root-folder"></span>
                      <span i18n="variable.category-folder"></span>
                      <span i18n="variable.clipping-folder"></span>
                      <span i18n="variable.clipping-path"></span>
                      <span i18n="variable.category-path"></span>
                      <span i18n="variable.storage-path"></span>
                    </div>
                  </div>
                </details>
              </div>
              <div class="input-group">
                <label i18n="label.storage-folder"></label>
                <div class="input-error title-file-folder"><div class="notice-danger"></div></div>
                <input type="text" id="title-file-folder" i18n-attr="placeholder:placeholder.notblank"/>
              </div>
              <div class="input-group">
                <label i18n="label.storage-filename"></label>
                <input type="text" id="title-file-name" i18n-attr="placeholder:placeholder.notblank"/>
              </div>
            </fieldset>

          </div>
        </div>
      </section>
    </template>

    <template id="section-setting-offline-page-tpl">
      <section id="setting-offline-page">
        <h2 class="center" i18n="title.offline-page"></h2>
        <div class="intro">
          <h3 i18n="title.intro"></h3>
          <div class="notice-info">
            <label  i18n="notice.offline-page"></label>
            <br />
            <a href="go.page:offline-page" target="_blank" i18n="notice.offline-page.link-label"></a>
          </div>
        </div>
        <div class="handler">
          <h3 i18n="title.handler"></h3>
          <div class="options" id="offline-page-handler">
            <a data-value="Browser" i18n="handler.browser.name"></a>
            <a data-value="NativeApp" i18n="handler.native-app.name"></a>
          </div>
          <div class="danger-box"></div>
          <div class="info-box"></div>
          <div class="warning-box"></div>
        </div>
        <div class="detail">
          <h3 i18n="title.detail"></h3>
          <div class="notice-info" i18n="notice.clipping-js-path"></div>
          <input type="text" id="clipping-js-path" i18n-attr="placeholder:placeholder.notblank"/>
          <br />
          <div class="notice-info" i18n="notice.autogenerate-clipping-js"></div>
          <div>
            <input type="checkbox" id="autogenerate-clipping-js" />
            <label for="autogenerate-clipping-js" i18n="label.autogenerate-clipping-js-input"></label><br /><br />
            <label i18n="label.last-generate-time"></label>:
            <label id="last-generate-clipping-js-time">${lastGenerateClippingJsTime}</label>&nbsp;
            <button id="generate-clipping-js-now" i18n="button.generate-now"></button>
          </div>
        </div>
      </section>
    </template>

    <template id="section-setting-refresh-history-tpl">
      <section id="setting-refresh-history">
        <h2 class="center" i18n="title.refresh-history"></h2>
        <div class="intro">
          <h3 i18n="title.intro"></h3>
          <div class="notice-info" i18n="notice.refresh-history"></div>
        </div>
        <div class="handler">
          <h3 i18n="title.handler"></h3>
          <div class="options" id="refresh-history-handler">
            <a data-value="NativeApp" i18n="handler.native-app.name"></a>
          </div>
          <div class="danger-box"></div>
          <div class="info-box"></div>
          <div class="warning-box"></div>
        </div>
        <div class="detail">
          <h3 i18n="title.detail"></h3>
          <div>
            <input type="checkbox" id="auto-refresh-history" />
            <label for="auto-refresh-history" i18n="label.auto-refresh-history-input"></label><br /><br />
            <label i18n="label.last-refresh-time"></label>:
            <label id="last-refresh-history-time">${lastRefreshHistoryTime}</label>&nbsp;
            <button id="refresh-history-now" i18n="button.refresh-now"></button>
          </div>
        </div>
      </section>
    </template>

    <template id="section-setting-handler-browser-tpl">
      <section id="setting-handler-browser">
        <h2 class="center" i18n="title.handler-browser"></h2>
        <div class="intro">
          <h3 i18n="title.intro"></h3>
          <p i18n="handler.browser.intro"></p>
        </div>
        <div class="features">
          <h3 i18n="title.feature"></h3>
          <ul>
            <li i18n="handler.browser.feature.a"></li>
            <li i18n="handler.browser.feature.b"></li>
          </ul>
        </div>
        <div class="testing">
          <h3 i18n="title.testing"></h3>
          <div class="notice-info"><p i18n="notice.browser-download-testing"></p></div>
          <div class="info-box"></div>
          <div class="success-box"></div>
          <div class="danger-box"></div>
          <button id="test-download-request" i18n="button.test"></button>
        </div>
        <hr>
        <div class="switch">
          <input type="checkbox" id="handler-browser-enabled" disabled/>
          <label for="handler-browser-enabled" i18n="label.enable-handler"></label>
        </div>
      </section>
    </template>

    <template id="section-setting-handler-native-app-tpl">
      <section id="setting-handler-native-app">
        <h2 class="center" i18n="title.handler-native-app"></h2>
        <div class="intro">
          <h3 i18n="title.intro"></h3>
          <p i18n="handler.native-app.intro"></p>
        </div>
        <div class="permissions">
          <h3 i18n="title.permissions"></h3>
          <div class="success-box"></div>
          <div class="danger-box"></div>
          <button class="hide" id="request-native-app-permissions" i18n="button.request-native-app-permissions"></button>
          <button class="hide" id="remove-native-app-permissions" i18n="button.remove-native-app-permissions"></button>
        </div>
        <div class="status">
          <h3 i18n="title.status"></h3>
          <div class="item hidden app-version">
            <span i18n="label.version"></span>
            <span class="value"></span>
          </div>
          <div class="item hidden ruby-version">
            <span i18n="label.ruby-version"></span>
            <span class="value"></span>
          </div>
          <div class="item hidden download-dir">
            <span i18n="label.download-dir"></span>
            <span class="value"></span>
          </div>
          <div class="danger-box"></div>
          <br>
          <button class="hidden" id="native-app-reload" i18n="button.native-app-reload" i18n-attr="title:hint.native-app-reload"></button>
        </div>
        <div class="features">
          <h3 i18n="title.feature"></h3>
          <ul>
            <li i18n="handler.native-app.feature.a"></li>
            <li i18n="handler.native-app.feature.b"></li>
            <li i18n="handler.native-app.feature.c"></li>
          </ul>
        </div>
        <div class="notice-warning">
          <p><label i18n="handler.native-app.warning"></label></p>
        </div>
        <div class="switch">
          <input type="checkbox" id="handler-native-app-enabled" />
          <label for="handler-native-app-enabled" i18n="label.enable-handler"></label>
        </div>
      </section>
    </template>

    <template id="section-setting-handler-wiz-note-plus-tpl">
      <section id="setting-handler-wiz-note-plus">
        <h2 class="center" i18n="title.handler-wiz-note-plus"></h2>
        <div class="intro">
          <h3 i18n="title.intro"></h3>
          <p i18n="handler.wiz-note-plus.intro"></p>
        </div>
        <div class="status">
          <h3 i18n="title.status"></h3>
          <div class="info-box"></div>
          <div class="danger-box"></div>
        </div>
        <div class="features">
          <h3 i18n="title.feature"></h3>
          <ul>
            <li i18n="handler.wiz-note-plus.feature.a"></li>
          </ul>
        </div>
        <div class="notice-warning">
          <p><label i18n="handler.wiz-note-plus.warning"></label></p>
        </div>
        <div class="switch">
          <input type="checkbox" id="handler-wiz-note-plus-enabled" />
          <label for="handler-wiz-note-plus-enabled" i18n="label.enable-handler"></label>
        </div>
      </section>
    </template>

    <template id="notice-tpl">
      <div class="notice-${type}">
        <p><label>${message}</label></p>
      </div>
    </template>

    <!-- scripts -->
    <script src="../vendor/js/browser-polyfill.js"></script>
    <script src="../vendor/js/i18n.js"></script>
    <script src="../_locales/en/common.js"></script>
    <script src="../_locales/en/setting.js"></script>
    <script src="../_locales/zh_CN/common.js"></script>
    <script src="../_locales/zh_CN/setting.js"></script>
    <script src="setting.js" type="module"></script>
  </body>
</html>
